<template>
	<view class="main">
		<u-navbar title="取消成功" leftIconColor="#fff" :titleStyle="{color:'#fff'}" bgColor="#ffffff00" :fixed="false" :autoBack="false">
		</u-navbar>


		<view class="state xai xflex-x-around xmt40">
			<view class="state-item xflex-y-center">
				<image class="state-icon" src="/static/image/mine/goxuan.png" mode=""></image>
				<view class="state-text">
					申请取消
				</view>
			</view>
			<view class="state-h">

			</view>

			<view class="state-item xflex-y-center">
				<image class="state-icon" src="/static/image/mine/goxuan.png" mode=""></image>
				<view class="state-text">
					处理中
				</view>
			</view>
			<view class="" :class="info.data.status == 1?'state-h':'state-hs'">

			</view>

			<view class="state-item xflex-y-center">
				<image class="state-icon" v-if="info.data.status == 1" src="/static/image/mine/goxuan.png" mode=""></image>
				<image class="state-icon" v-if="info.data.status == 0" src="/static/image/mine/1.png" mode=""></image>
				<view class="state-text">
					取消成功
				</view>
			</view>

		</view>

		<view class="order">
			<view class="xflex-x order-bos">
				<view class="order-left xmr32 pr xflex-y-center">
					
					<view class="order-xz" :class="info.data.status == 0?'clo':''">
						<image class="order-icon" src="/static/image/mine/jd.png" mode=""></image>
					</view>

					<view class="order-wicon" v-if="info.data.status == 1">

					</view>
				</view>
				
				<view class=""  v-if="info.data.status == 1">
					<view class="order-box">
						<view class="order-title">
							您的订单已取消。如您使用了优惠券等，请查看取消进度详情。
						</view>
						<view class="order-time">
							{{info.data.createtime}}
						</view>
					</view>
					
					
					<view class="order-box" >
						<view class="order-titles">
							您的取消申请已提交。
						</view>
						<view class="order-titles xmt24">
							{{info.data.createtime}}
						</view>
					</view>
				</view>
				
				
				<view class=""  v-if="info.data.status == 0">
					<view class="order-box">
						<view class="order-title">
							您的取消申请已提交。
						</view>
						<view class="order-time">
							{{info.data.createtime}}
						</view>
					</view>
					
					
				</view>
			</view>
			
			<!-- <view class="btns xflex-x-center">
				<view class="btns-btn xflex-x-center">
					<view class="btns-txt">
						收起
					</view>
					<image class="btns-icon" src="/static/image/mine/shang.png" mode=""></image>
				</view>
				
				<view class="btns-btn xflex-x-center">
					<view class="btns-txt">
						展开
					</view>
					<image class="btns-icon" src="/static/image/mine/xia3.png" mode=""></image>
				</view>
			</view>
			 -->
		</view>
		
		
		
		<view class="xp24  xmt32 xbgf">
			
			<view class="xfz30 xc2 xfw500 xmt40 xmb32">
				基本信息
			</view>
			<view class="xflex-x">
				<view class="lab">
					订单编号：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.sn}}
					</view>
					
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script setup>
	import {schedule } from '/network/home.js'
	import {
		defineProps,
		defineEmits,
		watchEffect,
		ref,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue'
	
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	
	let info = reactive({
		id:'',
		data:''
	})
	onLoad((option) => {
		info.id = option.id
		getinfo()
	})
	
	
	const getinfo = () => {
		schedule({
			id: info.id,
			action: 'info'
		}).then(res => {
			console.log(res);
			info.data = res.data
		})
	}
	
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	
	.main {
		width: 748rpx;
		height: 638rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
	}
	.clo {
		&::after {
			height: 0 !important;
		}
	}
	.state {
		margin: auto;
		width: 684rpx;
		height: 132rpx;
		background: #FFFFFF50;
		border-radius: 26rpx;
		// opacity: 0.5;
		margin-top: 42rpx;

		&-icon {
			width: 30rpx;
			height: 30rpx;
		}

		&-item {}

		&-text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-top: 25rpx;
		}

		&-h {
			width: 148rpx;
			height: 2rpx;
			background: #FFFFFF;
			margin-top: 42rpx;
		}
		
		&-hs {
			width: 148rpx;
			height: 2rpx;
			background: #FFFFFF;
			margin-top: 42rpx;
			opacity: 0.2;
		}
	}

	.order {
		margin-top: 50rpx;
		width: 750rpx;
		min-height: 392rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 65rpx 58rpx 23rpx 32rpx;
		box-sizing: border-box;
		
		&-bos{
			align-items: flex-start;
		}
		&-icon {
			width: 30rpx;
			height: 30rpx;
			margin-bottom: 116rpx;
			position: relative;
			z-index: 1;


		}


		&-xz {
			height: 180rpx;

			&::after {
				position: absolute;
				content: '';
				display: block;
				width: 2rpx;
				height: 180rpx;
				background: #E2E3E8;
				// background-color: #000;
				left: 15rpx;
				top: 10rpx;
				z-index: 0;
			}
		}
		
		&-left {
			width: 30rpx;
		}


		&-wicon {
			width: 16rpx;
			height: 16rpx;
			background: #E9E9E9;
			border-radius: 50%;
			z-index: 1;

		}
		
		&-title{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}
		&-time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			margin-top: 21rpx;
		}
		
		&-box {
			height: 120rpx;
			margin-bottom: 38rpx;
		}
		
		&-titles {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #CECECE;
			line-height: 36rpx;
		}
	}
	
	.btns {
		margin: auto;
		&-btn {
			width: 147rpx;
			height: 49rpx;
			border-radius: 25rpx;
			border: 2px solid #787878;
			margin-right: 22rpx;
		}
		
		&-txt {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
			margin-right: 10rpx;
		}
		
		&-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
	
	.lab {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #737373;
		margin-right: 28rpx;
	}
	
	.value {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
	}
</style>